<template>
    <div class="feedback-list pane-content">
        <el-dialog v-model="dialogVisible" title="反馈详情" width="50%">
            <div style="margin-bottom: 20px">
                <h4>反馈标题:{{ currentFeedback.title }}</h4>
                <p>反馈内容:{{ currentFeedback.content }}</p>
                <p>处理意见:{{ currentFeedback.solution || '暂时未处理' }}</p>
            </div>
        </el-dialog>
        <div class="pane-top">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="type" label="类型" width="120">
                    <template #default='{ row }'>
                        <el-tag type="primary" class="mx-1" round v-if="row.type == '建议'">{{ row.type }}</el-tag>
                        <el-tag type="warning" class="mx-1" round v-if="row.type == '问题'">{{ row.type }}</el-tag>
                        <el-tag type="danger" class="mx-1" round v-if="row.type == '举报'">{{ row.type }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="status" label="状态" width="120">
                    <template #default='{ row }'>
                        <el-tag :type="row.status == '0' ? 'primary' : 'success'">
                            {{ row.status == '0' ? '处理中' : '已处理' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="最新更新时间" width="180">
                    <template #default='{ row }'>
                        <div>{{ row.create_time?.slice(0, 10) }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" @click="handleDetail(scope.row)">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="table-footer">
            <el-pagination :page-size="10" :current-page="paginationData.currentPage" :pager-count="7"
                :total="paginationData.total" :page-count="paginationData.count" @current-change="currentChange"
                layout="prev, pager, next" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getFeedbackListByMe } from '@/api/feedback.js'

import {useUserInfoStore} from '@/store/userInfo.js'

const userStore = useUserInfoStore()

const tableData = ref([])

const dialogVisible = ref(false)
const currentFeedback = ref({})

const handleDetail = (row: any) => {
    currentFeedback.value = row
    dialogVisible.value = true
}

// 分页数据
const paginationData = reactive({
    total: 1,
    pageCount: 1,
    currentPage: 1,
})
// 获取列表的页数
const getListLength = async () => {
    const res = await getFeedbackListByMe(1,userStore.account)
    paginationData.total = res.data.total
    paginationData.pageCount = Math.ceil(res.data.length / 10)
}
getListLength()
// 默认获取第一页的数据
const getFirstPageList = async () => {
    const res = await getFeedbackListByMe(1,userStore.account)
    tableData.value = res.data.data
    paginationData.currentPage = 1
}
getFirstPageList()
//监听换页
const currentChange = async (value: number) => {
    paginationData.currentPage = value
    const res = await getFeedbackListByMe(paginationData.currentPage,userStore.account)
    tableData.value = res.data.data
}

</script>

<style scoped>
.feedback-list {
    padding: 20px;
}

.el-pagination {
    margin-top: 20px;
    justify-content: center;
}

.pane-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 101px);
    background: #fff;

    .pane-top {
        .module-common-header {
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .search-wrapped {
                display: flex;
            }

        }

        .module-common-table {
            min-height: 10px;
            padding: 10px 20px 20px;
            margin-bottom: 8px;
            background: #fff;
        }
    }

    .table-footer {
        display: flex;
        justify-content: flex-end;
        background: #fff;
    }

}
</style>